<head>
    <!--MD5加密-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>
</head>
<div id="v_id_{{ name }}" style="display: inline-block;">
        {#        <el-button type="info" size="small" @click="copy">复制</el-button>#}
        {#        <el-button type="primary" size="small" @click="reset">手动修改</el-button>#}
        <input type="hidden" name="{{ raw_name }}" v-model="value">
        <el-input v-model="value" {{ attrs|safe }} {% if style %} style="{{ style|safe }}"{% endif %} :maxlength="lenMax" :minlength="lenMin">
            <el-button slot="prepend" @click="generate" type="success">随机生成</el-button>
            {#            <el-button slot="append" @click="reset" type="primary" icon="el-icon-edit">手动修改</el-button>#}
            <el-button slot="append" @click="copy" type="info" icon="el-icon-document-copy">复制</el-button>
        </el-input>
</div>
<script type="text/javascript">
    var app_{{ widget.name }} = new Vue({
        el: '#v_id_{{ name }}',
        data: {{ app_data|safe }},
        mounted(){
            console.log("app_data:",this.data);
            console.log("value:",this.value);
        },
        methods: {
            reset() {
                let _this = this;
                this.$prompt('请输入新的密码', '密码重置', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /.{8,16}/,
                    inputErrorMessage: '密码格式不正确'
                }).then(({value}) => {
                    this.$message({
                        type: 'success',
                        message: '重置成功，请及时点击保存，否则重置将无效！'
                    });
                    this.value = value;
                    //进行MD5加密，再放到form表单中
                    this.value = md5(value);

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '密码重置被取消'
                    });
                });
            },

            generate() {
                this.value = '';
                let len = Math.ceil((this.lenMax + this.lenMin) / 2);
                console.log(this.lenMin,this.lenMax,"随机生成密码的长度为:",len,"pattern:",this.pwdPattern);
                for (let i = 0; i < len; i++) {
                    let x = Math.floor(Math.random() * this.pwdPattern.length);
                    this.value += this.pwdPattern[x];
                }
                console.log("pure value:",this.value);
                if(this.encrypt == 'md5'){
                       //进行MD5加密，再放到form表单中
                       this.value = md5(this.value);
                       console.log("md5 encrypted value:",this.value);
                }
            },
            copy() {
                if (this.value === ''||this.value ===undefined){
                     this.$message({
                        type: 'warn',
                        message: '密码是空的'
                    });
                }else{
                    copyStr(this.value)
                     this.$message({
                        type: 'success',
                        message: '复制成功！'
                    });
                }
            }
        },
    });

    function copyStr(str) {
        var oInput = document.createElement('input');
        oInput.value = str;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        oInput.className = 'oInput';
        oInput.style.display = 'none';
    }
</script>